import React, { FC, useEffect, useState } from 'react'
import ChartPie from '@/components/pages/chartPie'
import SaleOne from '@/components/pages/saleOnePure'
import ChartColumn from '@/components/pages/chartColumnRevert'
import Bar from '@/components/pages/barper'
import ChartLine from '@/components/pages/chartLine'
import styled from "styled-components"
import { useStores } from '@/store'
import { PageDateSelect } from '@/types/pages/enum'
import { FnCallBack } from '@/types/header/types'
import { inject, observer, PropTypes } from "mobx-react"
import Title from '@/components/pages/title'
import bg_verticle from '@/assert/images/backFrame.png'
import { IPurchaseMaterialFull } from '@/types/pages/purchase/interface'
import imgone_url from '@/assert/images/img1.png'
import imgtwo_url from '@/assert/images/img2.png'
const ContentFrame = styled.div`
    width: 100%;
    position: absolute;
    top: 8.3rem;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    .top{
      flex:1 1 48%;
      display: flex;
      flex-direction: row;
      .sale{
        flex:1 1 50%; 
        padding:3rem;
        display: flex;
        flex-direction: column;
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat; 
        overflow:hidden;
        .conn{
          display: flex;
          flex-direction: row;
          padding: 3rem;
          .sale-content-top{
            margin-top:6rem;
            flex:1 1 50%; 
            display: flex;
            flex-direction: column;  
              
          } 
          .sale-content{
            flex:1 1 50%;   
            margin-top:6rem;
            display: flex;
            flex-direction: column;   
          
          } 
        }

      }  
      .species{
        flex:1 1 25%;
        position:relative;  
      }
      .money{
        flex:1 1 25%;
        position:relative;
      } 
    }
    .bottom{
      flex:1 1 52%;
      display: flex;
      flex-direction: row;
      .chart-line{
        flex:1 1 50%; 
        display: flex; 
        .left-pie,.right-pie{
          flex:1;
        }
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat; 
      }
      .chart-colmn{
        flex:1 1 50%;  
        background-image: url(${bg_verticle});
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
`

const Content: FC<{}> = function () {
  const store = useStores();
  const { purchaseNum, purchaseMoney, materialPie, purchasePie, materialColumn, purchaseLine } = store.purchaseMaterial.screenData;
  const fnCallBack: FnCallBack = (data: Partial<IPurchaseMaterialFull>) => {
    store.header.srtScreenData(data);
    // setScreenData(store.header.headerControl.screenData);
    store.header.setHeaderName('原料采购');
    document.title = '原料采购';
  };
  useEffect(() => {
    store.transportCosts.getScreenData(PageDateSelect.year);
    store.header.initHeaderControl(PageDateSelect.year, async (type, fnCallBack, date) => {
      const data = await store.purchaseMaterial.getScreenData(type, date)
      fnCallBack<Partial<IPurchaseMaterialFull>>(data);
    }, fnCallBack)
    // 模拟按钮点击
    store.header.headerControl.changeButton!(PageDateSelect.year, fnCallBack);

  }, [])

  return (
    <ContentFrame>
      <div className='top'> 
        <div className='sale'> 
          <Title name="采购预览" style={{ paddingTop: '1rem' }} />
          <div className='conn'>
            <div className='sale-content-top'>
              <SaleOne title=""{...purchaseNum} image={imgone_url} />
              <Bar text={purchaseNum.name!} totalNum={purchaseNum.totalNum!} saleNum={purchaseNum.num!} />
            </div>
            <div className='sale-content'>
              <SaleOne title=""{...purchaseMoney} image={imgtwo_url} />
              <Bar text={purchaseMoney.name!} totalNum={purchaseMoney.totalNum!} saleNum={purchaseMoney.num!} />
            </div>
          </div>
   
        </div>
        <div className='species'><ChartPie title={materialPie.title!} dataset={materialPie.dataset} /></div>
        <div className='money'> <ChartPie title={purchasePie.title!} dataset={purchasePie.dataset!} /></div>
      </div>
      <div className='bottom'>
        <div className='chart-line' > <ChartColumn title={materialColumn.title!} dataset={materialColumn.dataset!} /></div>
        <div className='chart-colmn'><ChartLine title={purchaseLine.title!} dataset={purchaseLine.dataset!} /></div>

      </div>

    </ContentFrame>
  )
}

export default observer(Content) 
